import React, {lazy, useEffect, useState} from "react";
import {shallowEqual, useSelector,useDispatch} from "react-redux"
import {withRouter} from "react-router-dom"
import { Menu, Dropdown,message } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const Ceshi = lazy(async () => import("../components/ceshi"))

function myheader(props) {
    const dispatch = useDispatch()
    const store = useSelector(state => state.user, shallowEqual)
    const [msg,setmsg] = useState({msg:"正在获取"})
    // 函数式组件的生命周期
    useEffect(()=>{
        const a = setTimeout(()=>{
            setmsg({msg:"天气获取完成"})
        },5000)
        return ()=>clearTimeout(a)
    },[])
    // 下拉框选项
    const menulist = [
        {name:"注销",path:"login"},
    ]
    // 注销事件
    const zhuxiao = () => {
        dispatch({type:"zhuxiao",payload:{}})
        props.history.replace("/login")
    }
    // 下拉框的点击事件
    const tiaozhuan=(path)=>{
        switch (path) {
            case "login":
                zhuxiao()
                break
        }
    }
    // 下拉组件
    const menu = (
        <Menu>
            {menulist.map(item=>{
                return (
                    <Menu.Item key={item}>
                        <div className="w-150px h-20px juzhong hover:text-blue-500 active:(text-red-500)" onClick={()=>tiaozhuan(item.path)}>
                            <span>{item.name}</span>
                        </div>
                    </Menu.Item>
                )
            })}
        </Menu>
    )
    return (
        <div className="w-full h-10 flex justify-between items-center bg-gray-800 text-white">
            {/*logo*/}
            <div
                className="w-150px h-full juzhong cursor-pointer select-none bg-white bg-opacity-0 hover:(bg-opacity-50 text-red-500)">
                <span>这是logo</span>
            </div>
            {/*中间区域*/}
            <div className="flex-1 flex justify-evenly items-center">
                <Ceshi/>
                <span>{msg.msg}</span>
            </div>
            {/*用户信息*/}
            <div className="px-3 select-none juzhong space-x-2">
                <Dropdown overlay={menu}>
                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                        <span className="cursor-pointer select-none">{store.name}</span>
                    </a>
                </Dropdown>
            </div>
        </div>
    )
}

export default withRouter(myheader)